@import "../../../style/gn_search.less";
@import "../../../style/gn_metadata.less";
@import "gn_facets_default.less";
@import "gn_pagination_default.less";
@import "gn_feedback_default.less";
// page layout
@import "gn_layout_default.less";
// topics, categories and Inspire
@import "gn_topics_default.less";
// navigation
@import "gn_navbar_default.less";
// styling for a single result: metadata view
@import "gn_result_default.less";
// styling for all search results
@import "gn_results_default.less";
// main map and minimap
@import "gn_map_default.less";
// footer and bottombar
@import "gn_footer_default.less";
// infolists on the homepage
@import "gn_infolist_default.less";
// alert messages
@import "gn_alerts_default.less";
// variables for manipulating the theme
@import "gn_variables_default.less"; // must be last

/* Hide the tabset selector because tab
   switch is available in the top tool bar */
#main-tabset > ul:nth-child(1) {
  display: none;
}

.popover {
  max-width: 350px;
}
.jumbotron {
  h1 {
    font-size: 36px;
  }
}

.gn-search-page {
  clear: both;
  flex-grow: 1;
  position: relative;
  padding-bottom: calc(~"@{gn-bottombar-height} + 10px");
  .badge {
      margin-right: 5px;
      background-color: #333;
      font-weight: normal;
    }
  .nav-pills {
    margin-bottom: 1em;
    text-align: center;
    li {
      display: inline-block;
      float: none;
      &:hover {
        cursor: pointer;
      }
    }
    .badge {
      margin-right: 5px;
    }
  }
}
.gn-source-logo {
  max-width: 100%;
  max-height: 60px;
}

[data-ng-search-form] {
  .gn-top-search {
    position: relative;
    padding-top: 2em;
    padding-bottom: 2em;
    background-color: @gn-search-background-color;
    [typeahead] {
      vertical-align: middle;
      display: inline-block;
    }
    [typeahead-popup] {
      text-align: left;
    }
    .inner-spinner {
      position: absolute;
      top: 1.75em;
      left: 50%;
      margin-left: 64px;
    }
    .gn-form-any {
      input[type="text"], button {
        height: 36px;
      }
      button.btn-lg, input[type="text"].input-lg {
        height: 46px;
      }
      input[type="text"].input-lg {
        &:focus {
          border-color: @gn-search-outline-color;
          box-shadow: rgba(0, 0, 0, 0.075) 0px 1px 1px inset, rgba(@gn-search-outline-color-red, @gn-search-outline-color-green, @gn-search-outline-color-blue, 0.6) 0px 0px 8px;
        }
      }
      button.btn-primary.btn-lg {
        background-color: @gn-search-button-background-color;
        border-color: darken(@gn-search-button-background-color, 5%);
        color: @gn-search-button-color;
        &:hover {
          background-color: darken(@gn-search-button-background-color, 10%);
          border-color: darken(@gn-search-button-background-color, 15%);
        }
      }
      .dropdown-menu > .active > a {
        background-color: @gn-search-button-background-color;
        color: @gn-search-button-color;
      }
    }
  }
  .loading {
    position: absolute;
    top: 1.8em;
    font-size: 40px;
    left: 46%;
    text-shadow: 0 0 1px white;
    z-index: 200;
    background: rgba(255,255,255,.7);
    border-radius: 1em;
    padding: .2em;
  }
}
// user search panel
.gn-search-user {
  .list-group {
    margin-bottom: 10px;
    .list-group-item {
      margin-top: 1px;
      padding-left: 0;
      padding-right: 0;
      border-radius: 0;
      border: 0;
      border-bottom: 1px solid @list-group-border;
    }
  }
}

// advanced search
.gn-search-filter {
  .nav-pills li {
    display: block;
  }
  .form-group {
    margin-bottom: 0;
  }
  .btn-link {
    padding-left: 0;
    font-size: 14px;
  }
  .control-label {
    padding: 3px 0 2px 0;
    display: inline;
    text-align: left;
    .control-label-span {
      display: block;
      margin-bottom: 2px;
      margin-top: 3px;
    }
  }
  .bootstrap-tagsinput {
    padding-top: 6px;
    padding-bottom: 5px;
    .tagsinput-trigger {
      top: 34px;
      right: 25px;
    }
    .tagsinput-clear {
      right: 20px;
      top: 0px;
    }
    .tag {
      white-space: normal;
      display: inline-flex;
      text-align: left;
      line-height: 1.5em;
      font-weight: normal;
      margin-bottom: 3px;
    }
    .tt-menu {
      .tt-dataset {
        .tt-suggestion {
          &:hover {
            cursor: pointer;
            background-color: @dropdown-link-hover-bg;
          }
        }
      }
    }
  }
  .gn-search-filter-datepicker {
    margin-bottom: 10px;
    .col-md-6 {
      padding-left: 0;
      @media (min-width: 400px) and (max-width: @screen-sm-max) {
        width: 50%;
        float: left;
      }
      @media (max-width: 400px) {
        padding-right: 0;
        margin-bottom: 10px;
      }
    }
  }
}

/*
  List of records
 */
.gn-info-list {
  padding: 5px 0px;
  margin: auto -10px;
  li {
    width: 33.3%;
    zoom: 1;
    list-style: none;
    float: left;
    padding: 10px;
    > div {
      margin: 0px;
      padding: 15px;
      height: 125px;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
      background-color: #fff;
      border: 1px solid #ddd;
      border-bottom: 2px solid #337ab7;
      cursor: pointer;
      > div.gn-md-thumbnail {
        float:left;
        width: 90px;
        height: 90px;
        margin-right: 15px;
        //background-image: url(../catalog/views/default/images/no-thumbnail.png);
        .gn-img-thumbnail {
          max-height: 90px;
          max-width: 90px;
          margin-right: 15px;
        }
      }
      > div.gn-md-title {
        a {
          color: #333333;
          font-size: 120%;
        }
      }
    }
    div:nth-child(2) {
      overflow: hidden;
      max-height: 100%;
      text-overflow: ellipsis;
    }
  }
  li.gn-more {
    position: relative;
    float:right;
  }
  .quickresultcard {
    background-color: @gn-resultcard-background-color;
    .front {
      .top {
        background-color: @gn-resultcard-title-background-color
      }
    }
  }
}

@import "gn_view.less";

gn-wps-process-form {
  .panel-body {
    padding: 0px;
  }
}

li.list-group-item.gn-map-item {
  text-align: center;
  font-size: 12px;

  .gn-md-thumbnail {
    display: inline-block;
    float: none;
    margin: 0px;
    background-image: url(../catalog/views/default/images/no-thumbnail.png);
    background-size: cover;
    background-position: center;
    width: auto;
    height: auto;
  }

  .gn-img-thumbnail-caption {
    height: 40px;
    line-height: 1.2em;
    overflow: hidden;
    position: relative;

    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 12px;
      background: linear-gradient(to bottom, fade(@gn-results-background-color, 0%) 0%, @gn-results-background-color 100%);
    }
  }

  .gn-top-records [data-gn-results-container]  & {
    padding: 14px;
    height: 205px;

    .gn-img-thumbnail-caption {
      margin: 5px 0px;
    }

    &:hover {
      cursor: pointer;

      // note, this may not be correct if a theme is applied,
      // as the actual result hover color is transparent black
      @result-hover-color: rgb(234, 234, 234);
      .gn-img-thumbnail-caption::after {
        background: linear-gradient(to bottom, fade(@result-hover-color, 0%) 0%, @result-hover-color 100%);
      }
    }
  }

  [gn-ows-context] ul.gn-resultview & {
    padding: 5px;
    height: 205px;
    text-align: center;

    .gn-md-thumbnail {
      width: 147px;
    }
    .gn-img-thumbnail-caption {
      height: 30px;
    }

    &:hover {
      cursor: pointer;

      // note, this may not be correct if a theme is applied,
      // as the actual result hover color is transparent black
      @result-hover-color: #f3f3f3;
      .gn-img-thumbnail-caption::after {
        background: linear-gradient(to bottom, fade(@result-hover-color, 0%) 0%, @result-hover-color 100%);
      }
    }
  }
}

// draft
.see-draft-pill {
  border: 1px solid @btn-default-border;
  margin-top: 5px;
  border-radius: 20px;
  padding: 2px 0  4px 0;
  display: block;
  cursor: pointer;
  color: @gray-dark;
  &:hover {
    color: @gray-darker;
    text-decoration: none;
  }
  small small {
    padding: 7px 2px 8px 8px;
  }
  label {
    margin: 0 15px 0 10px;
    font-weight: 400;
    font-size: 13px;
    cursor: pointer;
  }
  @media (max-width: @screen-md-min) {
    margin-bottom: 5px;
  }
}

// nojs styles
.gn-nojs {
  .gn-top-search {
    padding: 30px 0;
    margin-bottom: 30px;
    .gn-form-any input.input-lg {
      height: 46px;
    }
    .btn-lg {
      padding: 13px 16px;
    }
  }
}